<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">资产/产品规模(亿元)</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="product_size"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "productSize",
        data(){
            return{
                option:{
                    color: ['#C4D81F', '#87DE39', '#09E882', '#65c9c4','#2BA1C9','#7D226B','#C98976','#C9872E','#C96E20'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        textStyle:{
                            color: '#ffffff'//字体颜色
                        },
                        data: ['债券', '基金', '股票', '货币市场', '非标', '固收类', '权益类', '金融商品及衍生品类', '混合类']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        top:"25%",
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#ffffff'
                                }
                            },
                            data: ['2020年4月', '2020年5月', '2020年6月', '2020年7月', '2020年8月', '2020年9月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#ffffff'
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: '债券',
                            type: 'bar',
                            barWidth: 15,
                            stack: 'zc',
                            data: [979.38, 1087.02, 1054.08, 1078.79, 1237.8, 1198.25]
                        },
                        {
                            name: '基金',
                            type: 'bar',
                            stack: 'zc',
                            data: [489.69, 543.51, 527.04, 539.4, 618.9, 599.13]
                        },
                        {
                            name: '股票',
                            type: 'bar',
                            stack: 'zc',
                            data: [244.845, 271.76, 263.52, 269.7, 309.45, 309.45]
                        },
                        {
                            name: '货币市场',
                            type: 'bar',
                            stack: 'zc',
                            data: [244.845, 271.76, 263.52, 269.7, 309.45, 299.56]
                        },
                        {
                            name: '非标',
                            type: 'bar',
                            stack: 'zc',
                            data: [489.69, 543.51, 527.05, 539.39, 618.9, 599.13],
                        },
                        {
                            name: '固收类',
                            type: 'bar',
                            barWidth: 15,
                            stack: 'ss',
                            data: [799.5, 859.5, 871.5, 919.5, 903.5, 983.5]
                        },
                        {
                            name: '权益类',
                            type: 'bar',
                            stack: 'ss',
                            data: [299.81, 322.31, 326.81, 344.81, 338.81, 368.81]
                        },
                        {
                            name: '金融商品及衍生品类',
                            type: 'bar',
                            stack: 'ss',
                            data: [0, 0, 0, 0, 0, 0]
                        },
                        {
                            name: '混合类',
                            type: 'bar',
                            stack: 'ss',
                            data: [899.44, 966.94, 980.44, 1034.44, 1016.44, 1106.44]
                        }
                    ]
                }
            }
        },
        mounted() {
            this.getEchart();
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('product_size'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.sn-container {
    left: 50px;
    top: 700px;
    width: 870px;
    height: 400px;
    .chartsdom {
        width: 100%;
        height: 100%;
    }
}
</style>